<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<style>
			.box{
				display: inline-block;
				padding: 10px 20px;
				border: 1px solid #8a8a8a;
				cursor:pointer;
			}
			.active{
				background-color: #8a8a8a;
				color: white;
			}
		</style>
	</head>
	<body>
		<!-- 
		 监视属性watch：
		 1.当被监视的属性变化时，回调函数自动调用，进行相关操作
		 2.监视的属性必须存在，才能进行监视! !
		 3.监视的两种写法:
			 (1) .new Vue时传入watch配置
			 (2) .通过vm. $watch监视

		 -->
		<div id="root">
			<div @click="handleClick">按钮</div>
		</div>
	</body>
	<script>
		const vm = new Vue({
			el:'#root',
			data(){
				return { 
					clicked:false
				}
			},
			methods:{
				handleClick(){
					this.clicked = !this.clicked
				}
			},
			computed:{
				className(){
					return this.clicked ? "box active" : "box"
				}
			},
			watch:{
				clicked:{
					immediate:true,//初始化时，让handler调用一下
					//当clicked的值被修改的时候，调用一次
					handler(newValue,oldValue){
						
					}
				}
			}
		})
		
		vm.$watch('clicked',{
			immediate:true,//初始化时，让handler调用一下
			//当clicked的值被修改的时候，调用一次
			handler(newValue,oldValue){
				
			}
		})
	</script>
</html>